<template>
  <div class="menu">
    <meunComponent />
  </div>
  <div class="login">
    <el-form
      ref="ruleFormRef"
      style="max-width: 600px"
      :model="ruleForm"
      :rules="rules"
      label-width="auto"
      class="login-ruleForm"
      :size="formSize"
      status-icon
    >
      <el-form-item label="用户名" prop="username">
        <el-input v-model="ruleForm.username" />
      </el-form-item>

      <el-form-item label="密码" prop="password">
        <el-input v-model="ruleForm.password" type="password" />
      </el-form-item>

      <el-form-item label="验证码" prop="code">
        <el-input
          v-model="ruleForm.code"
          auto-complete="off"
          style="width: 63%"
        >
        </el-input>
        <div class="login-code">
          <img :src="codeUrl" class="login-code-img" />
        </div>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="submitForm()"> 登录 </el-button>

        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from 'vue'
import type { ComponentSize, FormInstance, FormRules } from 'element-plus'
import instance from '@/utils/axios'
import router from '@/router/index'
import { userInfoStore } from '@/store/index'
import { meunComponent } from '@/components/meun'

const usertore = userInfoStore()

interface RuleForm {
  username: string
  password: string
  code: string
}

const formSize = ref<ComponentSize>('default')
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive<RuleForm>({
  username: '',
  password: '',
  code: '',
})

let codeUrl = ref<string>()
let token = ref<string>()

// const token = reactive({
//   data: '',
//   token: '',
//   status: 0,
// })

const rules = reactive<FormRules<RuleForm>>({
  username: [
    { required: true, message: 'Please input name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  password: [
    { required: true, message: 'Please pick a password', trigger: 'blur' },
  ],
  code: [{ required: true, message: 'Please pick a code', trigger: 'blur' }],
})

const getImageCode = async () => {
  try {
    const reponse = await instance.get('/common/captchaImage')
    codeUrl.value = reponse.data
  } catch (error) {
    console.error(error)
  }
}

// const login = () => {
//   instance
//     .post('/login', ruleForm)
//     .then((response) => {
//       token.data = response.data
//       token.status = response.status
//     })
//     .catch((error) => {
//       console.error('There was an error!', error)
//     })
//   return token
// }

const getToken = () => {
  instance
    .post('/login', ruleForm)
    .then((response) => {
      token = response.data.token
    })
    .catch((error) => {
      console.error('There was an error!', error)
    })
  return token
}

onMounted(getImageCode)

const submitForm = () => {
  console.log('userInfo submit!')
  const token = getToken()

  console.log('userInfo submit!', token)
  // if (token.data && 200 === token.status) {
  //   usertore.setUser({
  //     name: ruleForm.username,
  //     token: token.data,
  //     roles: [''],
  //   })
  //   // userInfoStore
  //   console.log('userInfo token!', token)
  //   router.push('userInfo')
  // }
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style scoped>
.meun {
  width: 100%;
  height: 20%;
}
.login {
  width: 100%;
  height: 80%;
  background-image: url('../../assets\images\bg-left-eac79b22c70862cee1638879ef602263.png');
}
.login-ruleForm {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  max-width: 100%;
  width: 460px;
  height: 300px;
  padding: 10px 35px 0;
  margin: auto;
  position: absolute;
  top: 48%;
  left: 45%;
  margin: -140px 0 0 -180px;
}

.el-form-item {
  margin-top: 36px;
}

.el-button {
  margin-left: 25%;
}

.login-code {
  width: 33%;
  height: 38px;
  float: right;
}

.login-code-img {
  height: 38px;
  margin-left: 10px;
}
</style>
